<template>
    <div class="title side-card" :style="num(<string>style)">{{ title }}</div>
</template>

<script setup lang="ts">
const props = defineProps({
    title: {
        type: String,
        required: true,
    },
    style: {
        type: String,
        default: ''
    },
});
const num = computed(() => (style: string) => style);
</script>

<style scoped lang="scss">

.title {
  font-family: "Fredericka the Great", sans-serif;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto 0.8rem;
  text-align: center;
  font-size: 0.5rem;
}

@media (max-width: 36rem) {
  .title {
    transform: scale(0.8);
  }
}
</style>